<template>
	<view class="movie-detail">
		<view class="movie-header">
			<view class="movie-info">
				<view class="img-box">
					<image :src="movieDetail?.movie?.img" mode="aspectFit"></image>
				</view>
				<view class="right">
					<view class="title">
						{{movieDetail?.movie?.nm}}
					</view>
					<view class="author">
						{{movieDetail?.movie?.enm}}
					</view>
					<view class="type">
						{{movieDetail?.movie?.cat?.split(',')?.join("/")}}
					</view>
					<view class="my-text des">
						{{movieDetail?.movie?.star}}
					</view>
					<view class="time">
						{{movieDetail?.movie?.pubDesc}} / {{movieDetail?.movie?.episodeDur}}分钟
					</view>
					<view class="info-footer">
						<view class="btn">
							想看
						</view>
						<view class="btn">
							看过
						</view>
					</view>
				</view>
			</view>
			<view class="rate-all">
				<view class="first">
					<view class="opacity">
						猫眼购票评分
					</view>
					<view>
						{{movieDetail?.movie?.wish}}人想看
					</view>
					<view>
						{{movieDetail?.movie?.watched}}人看过
					</view>
					<uni-icons class="icon" type="forward" size="18" color="var(--white)"></uni-icons>
				</view>
				<view class="second">
					<view class="second-rate">
						<view class="s-rate">
							{{movieDetail?.movie?.sc}}
						</view>
						<view class="snum">
							{{movieDetail?.movie?.snum}}人评
						</view>
					</view>
					<view class="pic">
						<image
							src=""
							mode="widthFix"></image>
					</view>
				</view>
				<view class="three">
					{{movieDetail?.movie?.scm}}
				</view>
			</view>
			<view class="introduction">
				<view class="title">
					<view>
						简介
					</view>
					<view class="right" @click="changeShowAll">
						展开
						<uni-icons type="bottom" size="20" color="var(--white)"></uni-icons>
					</view>
				</view>
				<view class="introduction-content" :class="{'my-text':!showAll}">
					{{movieDetail?.movie?.dra}}
				</view>
			</view>
			<view class="actor">
				<view class="title">
					<view>
						演职人员
					</view>
					<view class="right">
						全部
						<uni-icons type="forward" size="20" color="var(--white)"></uni-icons>
					</view>
				</view>
				<view class="actor-list">
					<view class="actor-item" v-for="(item,index) in movieDetail?.celebrities?.slice(0,4)">
						<view class="img-box">
							<image :src="item.avatar" mode=""></image>
						</view>
						<view class="my-text actor-item-name">
							{{item.cnm}}
						</view>
						<view class="my-text actor-item-desc">
							{{item.desc}}
						</view>
					</view>
				</view>
			</view>
			<view class="recommend-video">
				<view class="title">
					<view>
						视频推荐
					</view>
					<view class="right">
						全部
						<uni-icons type="forward" size="20" color="var(--white)"></uni-icons>
					</view>
				</view>
				<view class="video-list">
					<view>
						<view class="video-item" v-for="(item,index) in movieDetail?.feedVideos?.feeds">
							<image :src="item.shareInfo.img" mode=""></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="content">
			<view class="comments">
				<view class="title">
					<view>
						精彩短评
					</view>
					<view class="right">
						全部
						<uni-icons type="forward" size="20" color="var(--black)"></uni-icons>
					</view>
				</view>
				<view class="comments-list">
					<view class="comments-item" v-for="(item,index) in movieDetail?.comments?.hotComments">
						<view class="first">
							<view class="img-box">
								<image class="img" :src="item?.avatarUrl" mode="aspectFill"></image>
							</view>
							<view class="middle">
								<view class="name">
									{{item.nick}}
								</view>
								<view class="rate">
									<uni-rate :readonly="true" :value="item.score/2" size="12" allowHalf="true"/>
								</view>
							</view>
						</view>
						<view class="my-text sec">
							{{item.content}}
						</view>
					</view>
				</view>
			</view>
			<view class="film-data">
				<view class="film-data-title">
					影片资料
				</view>
				<view class="film-list">
					<view class="film-item" v-for="(item,index) in movieDetail?.features" :key="index">
						<view class="img-box">
							<image :src="item.img" mode=""></image>
						</view>
						<view class="film-item-right">
							<view class="my-text film-item-title">
								{{item.title}}
							</view>
							<view class="my-text film-item-name">
								{{item.content}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="btn" @click="toSelectTicket">
				特惠购票
			</view>
		</view>
	</view>
</template>

<script setup>
	import {useMovieStore} from "@/stores/movie.js"
	import {
		getMovieDetail
	} from "@/api/index.js"
	import {
		onLoad
	} from '@dcloudio/uni-app';
	import {
		ref
	} from "vue";
	const store = useMovieStore();
	const showAll = ref(false);
	const changeShowAll = ()=>{
		showAll.value = !showAll.value;
	}
	const movieId = ref(0);
	const movieDetail = ref({});
	const getData = async () => {
		uni.showLoading({
			title: "加载中..."
		});
		let res = await getMovieDetail(movieId.value);
		movieDetail.value = res.data;
		console.log(movieDetail.value);
		uni.hideLoading();
	}
	onLoad((options) => {
		if (!options.movieId) {
			uni.navigateTo({
				url: "/pages/index/index"
			});
			return;
		}
		movieId.value = options.movieId;
		getData();
	});
	const toSelectTicket = ()=>{
		store.movie.value = movieDetail.value.movie;
		uni.navigateTo({
			url:`/pages/select-ticket/select-ticket?movieId=${movieId.value}`
		});
	}
</script>

<style lang="scss" scoped>
	.movie-detail {
		width: 100%;
		min-height: 100vmax;
		padding-bottom: 100rpx;
	}

	.title {
		font-size: 40rpx;
		color: var(--white);
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		opacity: .8;

		.right {
			display: flex;
			align-items: center;
			font-size: 24rpx;
			color: var(--white);
			opacity: .5;
		}
	}

	.movie-header {
		width: 100%;
		background-color: var(--brown2);
		padding: 0 20rpx;
		box-sizing: border-box;
		color: var(--white);
		padding-bottom: 40rpx;

		.movie-info {
			display: flex;
			justify-content: space-between;
			padding-top: 40rpx;

			.img-box {
				width: 232rpx;
				min-width: 232rpx;
				height: 320rpx;
				border-radius: 4rpx;

				image {
					width: 232rpx;
					height: 320rpx;
				}
			}

			.right {
				flex-grow: 1;
				margin-left: 10rpx;
				color: var(--white);

				>view {
					opacity: .5;
					font-size: 28rpx;
					margin-bottom: 10rpx;
				}

				.title {
					opacity: 1;
					font-size: 44rpx;
					color: var(--white);
					margin-bottom: 20rpx;
					padding: 0;
				}

				.info-footer {
					font-size: 40rpx;
					display: flex;
					justify-content: space-between;
					align-items: center;

					.btn {
						padding: 12rpx 70rpx;
						border-radius: 10rpx;
						background-color: var(--gray);
					}
				}
			}
		}

		.rate-all {
			width: 100%;
			min-height: 1.45rpx;
			background-color: var(--brown3);
			color: var(--white);
			border-radius: 10rpx;
			box-sizing: border-box;
			padding: 20rpx;

			.first {
				width: 100%;
				box-sizing: border-box;
				padding-bottom: 10rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 24rpx;

				>view,
				.icon {
					opacity: .6;
				}

				.opacity {
					opacity: 1;
				}
			}

			.second {
				width: 100%;
				display: flex;
				justify-content: center;
				align-items: center;

				.second-rate {
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;

					.s-rate {
						font-size: 50rpx;
						color: var(--yellow);
						font-weight: bold;
					}

					.snum {
						font-size: 24rpx;
						opacity: .6;
					}
				}

				.pic {
					width: 246rpx;
					height: 86rpx;
					margin-left: 20rpx;

					image {
						width: 246rpx;
						height: 86rpx;
						display: block;
					}
				}
			}

			.three {
				width: 100%;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				border-radius: 8rpx;
				margin-top: 20rpx;
				background-color: var(--brown);
				font-size: 28rpx;
				color: var(--yellow3);
			}
		}



		.introduction {
			width: 100%;

			.introduction-content {
				opacity: .8;
				width: 100%;
				font-size: 30rpx;
				color: var(--white);
				-webkit-line-clamp: 3;
			}
		}

		.actor {
			width: 100%;

			.actor-list {
				width: 100%;
				box-sizing: border-box;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.actor-item {
					flex: 1;

					.img-box {
						width: 160rpx;
						height: 220rpx;
						border-radius: 4rpx;
						overflow: hidden;

						image {
							width: 160rpx;
							height: 220rpx;
						}
					}

					.actor-item-name {
						font-size: 30rpx;
						color: var(--white);
						opacity: .8;
						margin: 10rpx 0;
					}

					.actor-item-desc {
						font-size: 24rpx;
						color: var(--white);
						opacity: .6;
						text-align: center;
					}
				}
			}
		}

		.recommend-video {
			width: 100%;

			.video-list {
				width: 100%;
				overflow: scroll;
				>view{
					width: max-content;
					display: flex;
					align-items: center;
				}
				.video-item {
					width: 328rpx;
					height: 216rpx;
					border-radius: 10rpx;
					overflow: hidden;
					margin-right: 20rpx;

					image {
						width: 328rpx;
						height: 216rpx;
					}
				}
			}
		}
	}

	.content {
		background-color: var(--gray3);
		padding: 40rpx 0;
		.comments{
			width: 100%;
			box-sizing: border-box;
			padding: 20rpx 20rpx;
			background-color: var(--white);
			.title{
				color: var(--black);
				.right{
					color: var(--black);
				}
			}
			.comments-list{
				width: 100%;
				.comments-item{
					.first{
						width: 100%;
						display: flex;
						.img-box{
							width: 80rpx;
							min-width: 80rpx;
							height: 80rpx;
							border-radius: 40rpx;
							overflow: hidden;
							image{
								width: 80rpx;
								height: 80rpx;
							}
						}
						.middle{
							font-size: 26rpx;
							opacity: .8;
							flex-grow: 1;
							margin-left: 10rpx;
						}
					}
					.sec{
						width: 100%;
						box-sizing: border-box;
						border: 20rpx solid transparent;
						opacity: .8;
						-webkit-line-clamp: 7;
						font-size: 28rpx;
					}
				}
			}
		}
		.film-data {
			width: 100%;
			box-sizing: border-box;
			padding: 0 20rpx;
			background-color: var(--white);

			.film-data-title {
				padding: 20rpx 0;
			}

			.film-list {
				display: flex;
				flex-wrap: wrap;

				.film-item {
					width: 50%;
					display: flex;
					margin-bottom: 20rpx;
					box-sizing: border-box;
					padding-left: 10rpx;

					.img-box {
						width: 36rpx;
						min-width: 36rpx;
						height: 36rpx;
						overflow: hidden;
						margin-top: 6rpx;

						>image {
							width: 36rpx;
							height: 36rpx;
						}
					}

					.film-item-right {
						flex-grow: 1;
						margin-left: 20rpx;
						opacity: .8;

						.film-item-title {
							font-size: 36rpx;
						}

						.film-item-name {
							font-size: 28rpx;
							margin-top: 10rpx;
						}
					}
				}
			}
		}
	}
	.footer{
		width: 100%;
		height: 100rpx;
		position: fixed;
		left: 0;
		bottom: 0;
		background-color: var(--white);
		display: flex;
		justify-content: center;
		align-items: center;
		.btn{
			width: 90%;
			height: 80%;
			background-color: var(--red);
			color: var(--white);
			border-radius: 12rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>